<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import type { UserLogin } from '../types/userType'
import { h, reactive, ref } from 'vue'
import {
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification,
  type FormInstance,
  type FormRules
} from 'element-plus'
import { api } from '../api/api'
import router from '@/router'

//用户的全局状态
const userStore = useUserStore()

//登录表单的model
const loginForm = reactive<UserLogin>({
  username: '',
  pwd: ''
})

//登录表单的实例引用
const loginFormRef = ref<FormInstance>()

//登录表单的校验规则
const rules = reactive<FormRules<UserLogin>>({
  username: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
  pwd: [{ required: true, message: '请填写密码', trigger: 'blur' }]
})

//登录表单的提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl
    .validate((valid) => {
      if (valid) {
        let loading = ElLoading.service()
        api
          .login(loginForm)
          .then((resp) => {
            //登录成功
            if (resp.success) {
              //全局储存当前用户的信息
              let usertype = resp.user?.type
              userStore.userInfo.username = resp.user?.username ?? ''
              userStore.userInfo.type = usertype ?? ''
              userStore.userInfo.id = resp.user?.id ?? -1
              loading.close()
              if (usertype == '0') router.push({ name: 'processingP' })
              else if (usertype == '1') router.push({ name: 'processingT' })
              else if (usertype == '2') router.push({ name: 'equipment' })
              else if (usertype == '3') router.push({ name: 'confirmingQ' })
              ElNotification({
                title: '状态',
                message: h('i', { style: 'color: teal' }, '登陆成功！')
              })
            }
            //登陆失败
            else {
              loading.close()
              ElMessage.error('登陆失败')
            }
          })
          .catch(() => {
            loading.close()
            ElMessageBox.alert('登陆失败', '错误', {
              confirmButtonText: '确认'
            })
          })
      } else {
        ElMessageBox.alert('登录数据填写错误', '错误', {
          confirmButtonText: '确认'
        })
      }
    })
    .catch(() => {
      ElMessageBox.alert('登陆失败', '错误', {
        confirmButtonText: '确认'
      })
    })
}
</script>

<template>
  <div class="background">
    <div class="login">
      <h1>登录</h1>
      <el-divider />
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules"
        label-position="right"
        label-width="auto"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密&emsp;码" prop="pwd">
          <el-input v-model="loginForm.pwd" placeholder="密码" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div class="buttonbox">
        <el-button type="primary" @click="submitForm(loginFormRef)">登录</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.background {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aqua;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(
    to bottom right,
    rgba(0, 47, 167, 0.62),
    rgba(255, 167, 147, 0.94)
  );
}

.login {
  background-color: white;
  border-radius: 10px;
  width: min(50ch, 100% - 4rem);
  margin-inline: auto;
  padding: 2rem;
  margin-top: -35px;
}

.buttonbox {
  text-align: center;
}
</style>
